import React from "react";
import { Redirect, Route } from "react-router-dom";
import store from "../redux";

import ViewConfig from "./config";
import { preMenu, preRoutes } from "./schema";
import { PreMenu, PreRoutesType, MenuConfig, RouteConfig } from "./types";

/**
 * 白名单
 */
export const whiteList = ["/login"];

/**
 * 根据菜单结构，配合视图配置，生成完整菜单
 * @param preMenu 菜单结构
 */
const genMenu = (preMenu: PreMenu) => {
    return preMenu.reduce((result: MenuConfig[], item) => {
        if (item.children) {
            result.push({
                name: item.name!,
                icon: item.icon,
                children: genMenu(item.children),
            });
        } else {
            const config = ViewConfig[item.code!];
            result.push({
                name: config.name,
                path: config.path,
                id: config.id,
            });
        }
        return result;
    }, []);
};

/**
 * 根据路由表结构，配合视图配置，生成完整路由表
 * @param preRoutes 路由表结构
 */
const genRoutes = (preRoutes: PreRoutesType) => {
    return preRoutes.reduce((result: RouteConfig[], item) => {
        // 有子级，就递归组装
        if (item.routes) {
            result.push({
                ...ViewConfig[item.code!],
                routes: genRoutes(item.routes),
            });
            // 没有子路由，直接组装
        } else {
            result.push({ ...ViewConfig[item.code!] });
        }
        return result;
    }, []);
};

interface IProps {
    routes?: RouteConfig[];
}

const RouterView: React.FC<IProps> = ({ routes }) => {
    if (!routes) return null;
    return (
        <>
            {routes.map((item) => {
                return (
                    <Route
                        key={item.path}
                        path={item.path}
                        render={(props) => {
                            // 是否登录
                            const { isLogin } = store.getState().user;

                            // 在白名单中，或者已经登录
                            if (whiteList.includes(item.path) || isLogin) {
                                return (
                                    <item.component
                                        {...props}
                                        routes={item.routes}
                                    />
                                );
                            }

                            // 去登录，并携带登录前访问的页面
                            return (
                                <Redirect
                                    to={{
                                        pathname: "/login",
                                        state: {
                                            redirect: props.location.pathname,
                                        },
                                    }}
                                />
                            );
                        }}
                    />
                );
            })}
        </>
    );
};

export const menu = genMenu(preMenu);

export const routes = genRoutes(preRoutes);

export default RouterView;
